{% extends "base_site.html" %} 
{% comment %}{% include "detail.html" %}{% endcomment %}
{% block title %}
<title>VM Monitoring</title>
{% endblock %} 


<div id="vm_detail" class="container-fluid">
    {% block main_content %}
    <div name="vm_name" class="panel panel-heading col-lg-4 col-md-4 col-sm-6 col-xs-6" style="font-weight:bold;font-size:150%;">{{ vm_info.name }}</div>

    <div class="panel panel-heading col-lg-4 col-md-4 col-sm-6 col-xs-6" style="font-weight:bold;font-size:120%;text-align:center;margin-left:auto;margin-right:auto;">
        <a href="{% url 'vm_index' %}">Return to all VMs</a>
    </div>

    <div class="panel panel-body">
        <table class="table">
            <tr>
                <td>IP Address</td>
                <td name="ip_addr">{{vm_info.ip}}</td>
            </tr>
            <tr>
                <td>Host Name</td>
                <td name="hostname">{{vm_info.hostname}}</td>
            </tr>
            <tr>
                <td>Total Disk Size</td>
                <td name="disk_size">{{vm_info.total_capacity}}</td>
            </tr>
            <tr>
                <td>CPU Number</td>
                <td name="cpu_number">{{vm_info.numCPU}}</td>
            </tr>
            <tr>
                <td>Memory (MB)</td>
                <td name="mem_size">{{vm_info.memoryMB}}</td>
            </tr>
            <tr>
                <td>NBVA Version</td>
                <td name="nbva_ver">{{vm_info.version}}</td>
            </tr>
            <tr>
                <td>Power Status</td>
                <td name="power_sta">{{vm_info.state}}</td>
            </tr>
        </table>
    </div>

    {% block add_disk_info %}
    {% include "disk_form.html" %}
    {% endblock %}

    <div class="panel panel-footer">
        <button name="poweron_vm" onclick="poweron_vm('{{vm_info.uuid}}')" class="btn btn-large navbar-btn btn-primary">Power On</button>
        <button name="poweroff_vm" onclick="poweroff_vm('{{vm_info.uuid}}')" class="btn btn-large navbar-btn btn-primary">Power Off</button>
        <button name="add_disk" data-toggle="modal" data-target="#add_disk_info" class="btn btn-large navbar-btn btn-primary">Add Disk</button>
        <button name="remove_disk" data-toggle="modal" data-target="#remove_disk" class="btn btn-large navbar-btn btn-primary">Remove Disk</button>
    </div>
    {% endblock %}
</div>

